<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>居民管理</el-breadcrumb-item>
      <el-breadcrumb-item>居民列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row>
        <el-col :span="5">
          <el-input placeholder="请输入居民姓名" v-model="queryInfo.residentName" clearable @clear="getResident">
            <el-button slot="append" icon="el-icon-search" @click="getResident"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3" style="padding-left:20px">
          <el-select v-model="queryInfo.community" placeholder="社区" @change="getResident">
            <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value"></el-option>
            <el-option label="全部" value=""></el-option>
          </el-select>
        </el-col>
        <el-col :span="3" style="padding-left:20px">
          <el-select v-model="queryInfo.healthState" placeholder="健康状态" @change="getResident">
            <el-option label="健康/未注射疫苗" value=0></el-option>
            <el-option label="健康/已打第一针" value=1></el-option>
            <el-option label="健康/已打第二针" value=2></el-option>
            <el-option label="健康/已打第三针" value=3></el-option>
            <el-option label="疑似疫情" value=4></el-option>
            <el-option label="确诊" value=5></el-option>
            <el-option label="全部" value=''></el-option>
          </el-select>
        </el-col>
        <el-col :span="4" style="padding-left:20px">
          <el-button type="primary" @click="addDialogVisible=true">添加居民</el-button>
        </el-col>
      </el-row>
      <el-table :data="residentList">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="居民姓名" prop="residentName"></el-table-column>
        <el-table-column label="居民性质">
          <template slot-scope="{row}">
            <el-tag type="success" v-if="row.residentState ===0">常住人口</el-tag>
            <el-tag type="primary" v-else>流动人口</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="所在社区" prop="community"></el-table-column>
        <el-table-column label="详细地址" prop="residentAddress"></el-table-column>
        <el-table-column label="身份证" prop="residentCard"></el-table-column>
        <el-table-column label="电话" prop="residentPhone"></el-table-column>
        <el-table-column label="健康状态">
          <template slot-scope="{row}">
            <el-tag type="success" v-if="row.healthState ===0">健康/未注射疫苗</el-tag>
            <el-tag type="success" v-if="row.healthState ===1">健康/已打第一针</el-tag>
            <el-tag type="success" v-if="row.healthState ===2">健康/已打第二针</el-tag>
            <el-tag type="success" v-if="row.healthState ===3">健康/已打第三针</el-tag>
            <el-tag type="warning" v-else-if="row.healthState ===4">疑似疫情</el-tag>
            <el-tag type="danger" v-else-if="row.healthState ===5">确诊</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="隔离信息" prop="lsolate"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="ShowEdit(row.residentId)">修改</el-button>
            <el-button type="warning" size="mini" @click="removeById(row.residentId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 30, 50]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="text-align:center" background>
      </el-pagination>
    </el-card>

    <!-- 添加工作人员对话框 -->
    <el-dialog title="添加居民" :visible.sync="addDialogVisible" width="50%" @close="resetAddForm">
      <el-form :model="addForm" :rules="rules" ref="addFormRef" label-width="100px">
        <el-form-item label="姓名" prop="residentName">
          <el-input v-model="addForm.residentName"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="residentPhone">
          <el-input v-model="addForm.residentPhone" type="number"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="residentCard">
          <el-input v-model="addForm.residentCard" ></el-input>
        </el-form-item>
        <el-form-item label="所在社区" prop="community">
          <el-select v-model="addForm.community" placeholder="请选择所在社区">
            <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="addForm.residentAddress"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="newPassword">
          <el-input v-model="addForm.newPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="residentPassword">
          <el-input v-model="addForm.residentPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="人口性质">
          <el-radio v-model="addForm.residentState" :label=0>常住人口</el-radio>
          <el-radio v-model="addForm.residentState" :label=1>流动人口</el-radio>
        </el-form-item>
        <el-form-item label="健康状态">
          <el-radio v-model="addForm.healthState" :label=0>健康/未注射疫苗</el-radio>
          <el-radio v-model="addForm.healthState" :label=1>健康/已打第一针</el-radio>
          <el-radio v-model="addForm.healthState" :label=2>健康/已打第二针</el-radio>
          <el-radio v-model="addForm.healthState" :label=3>健康/已打第三针</el-radio>
          <el-radio v-model="addForm.healthState" :label=4>疑似</el-radio>
          <el-radio v-model="addForm.healthState" :label=5>确诊</el-radio>
        </el-form-item>
        <el-form-item label="隔离信息" >
          <el-input v-model="addForm.lsolate" :disabled="addForm.healthState<4 "></el-input>
        </el-form-item>
      </el-form>
      <span>
        <el-button @click="resetAddForm">取 消</el-button>
        <el-button type="primary" @click="addResident">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改居民对话框 -->
    <el-dialog title="修改信息" :visible.sync="editDialogVisible" width="50%">
      <el-form :model="editForm" :rules="rules" ref="editFormRef" label-width="100px">
        <el-form-item label="姓名" prop="residentName">
          <el-input v-model="editForm.residentName" disabled></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="residentCard">
          <el-input v-model="editForm.residentCard" disabled></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="residentPhone">
          <el-input v-model="editForm.residentPhone" type="number"></el-input>
        </el-form-item>
        <el-form-item label="所在社区" prop="community">
          <el-select v-model="editForm.community" :placeholder="editForm.community">
            <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="residentAddress">
          <el-input v-model="editForm.residentAddress"></el-input>
        </el-form-item>
        <el-form-item label="人口性质">
          <el-radio v-model="editForm.residentState" :label=0>常住人口</el-radio>
          <el-radio v-model="editForm.residentState" :label=1>流动人口</el-radio>
        </el-form-item>
        <el-form-item label="健康状态">
          <el-radio v-model="addForm.healthState" :label=0>健康/未注射疫苗</el-radio>
          <el-radio v-model="addForm.healthState" :label=1>健康/已打第一针</el-radio>
          <el-radio v-model="addForm.healthState" :label=2>健康/已打第二针</el-radio>
          <el-radio v-model="addForm.healthState" :label=3>健康/已打第三针</el-radio>
          <el-radio v-model="addForm.healthState" :label=4>疑似</el-radio>
          <el-radio v-model="addForm.healthState" :label=5>确诊</el-radio>

        </el-form-item>
        <el-form-item label="隔离信息" prop="residentPassword">
          <el-input v-model="editForm.lsolate" :disabled="editForm.healthState<4"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="editResident">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import cityData from '../../assets/js/cityData.js'
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.addForm.newPassword !== '') {
          this.$refs.addFormRef.validateField('residentPassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.addForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      queryInfo: {
        residentName: '',
        pageNum: 1,
        pageSize: 5,
        community: '',
        healthState: ''
      },
      residentList: [],
      total: 0,
      addForm: {
        residentName: '',
        residentPassword: '',
        residentState: 0,
        residentAddress: '',
        residentCard: '',
        residentPhone: '',
        healthState: 0,
        lsolate: '',
        community: '',
        newPassword: ''
      },
      rules: {
        residentPassword: [{ validator: validatePass2, trigger: 'blur' }],
        newPassword: [
          { required: true, min: 5, max: 14, message: '长度在 5 到 14 个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        community: [{ required: true, message: '请输入工作社区', trigger: 'blur' }],
        residentAddress: [{ required: true, message: '请输入工作地址', trigger: 'blur' }],
        residentName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        residentPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
      },
      addDialogVisible: false,
      editDialogVisible: false,
      editForm: {},
      cityData
    }
  },
  created () {
    this.getResident()
  },
  methods: {
    // 获取居民列表
    async getResident () {
      const { data: res } = await this.$http.get('resident/getResident', { params: this.queryInfo })
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('请求居民列表数据失败')
      }
      this.$message.success('请求居民列表数据成功')
      this.residentList = res.data.records
      this.total = res.data.total
      console.log(this.residentList)
    },
    // 分页器
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getResident()
    },
    handleCurrentChange (newSize) {
      this.queryInfo.pageNum = newSize
      this.getResident()
    },
    // 清空添加对话框
    resetAddForm () {
      this.$refs.addFormRef.resetFields()
      this.password = ''
      this.addDialogVisible = false
    },
    // 添加居民
    async addResident () {
      const { data: res } = await this.$http.post('resident/addResident', this.addForm)
      // console.log(res)
      if (res.meta.status !== 200) {
        this.addDialogVisible = false
        return this.$message.error('添加失败')
      }
      // console.log(res)
      this.$message.success('成功')
      this.addDialogVisible = false
      this.getResident()
    },
    // 修改居民
    async editResident () {
      const { data: res } = await this.$http.put(`resident/editResidentById/${this.editForm.residentId}`, this.editForm)
      console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error('修改失败')
      }
      // console.log(res)
      this.$message.success('修改成功')
      this.editDialogVisible = false
      this.getResident()
    },
    // 展示修改框
    async ShowEdit (id) {
      const { data: res } = await this.$http.get(`resident/getResidentById/${id}`)
      if (res.meta.status !== 200) {
        return this.$message.error('获取信息失败')
      }
      this.editForm = res.data
      this.editDialogVisible = true
    },
    // 删除
    async removeById (id) {
      const confirm = await this.$confirm('此操作将永久删除该居民, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => {
        console.log(err)
      })
      if (confirm !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete(`resident/deleteResidentById/${id}`)
      if (res.meta.status !== 200) {
        return this.$message.error('删除居民失败')
      }
      this.$message.success('删除居民成功')
      this.getResident()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
